<template>
  <div class="hello">
    <h1>{{ msg }}😊</h1>
    <div>
      <p>
        <span>由于个人能力有限，可能部分功能不太完善。<br>
        接下来我说一说这个后台的功能以及不足之处吧，也算是这次练习的一个总结。</span>
      </p>
      这个项目基于[Vue2.5 + Thinkphp5.0]，<br>
      在Vue的基础上用了axios（用于ajax），Vuex（用于记录前端公共状态），还有iview这个UI框架（前后端分离，数据交互均为ajax）。
      <br>
      我就按照左边功能区来开始讲吧~
      <br>
      <br>
      <div>
        <ul>
          <li>0. 注册与登录，还是先说说这两个吧~ 由于Vue的路由其实也是单页面的，就是说无论怎么跳转，其实还是在同一个页面（这个可以看URL就知道，有“/#/”…），所以我用Vuex记录了共用状态，设了三个变量，backend、login、register，通过v-if（变量的true和false）来控制Vue组件的解拆与构造，由于Vuex是刷新就重置的，然后我在后端写了一个KeepAlive方法，每次刷新都调用这个方法，检查用户Session信息是否存在，存在就返回用户session里的数据，然后Vuex接收储存并判断该显示哪个页面哪些组件。用户注册的时候必须上传头像，另外，在用户登录的时候会ajax自动显示用户头像。再另外，用户头像上传后没有移动到别的文件夹，而是返回的整个链接储存到了数据库用户表avatar字段，这个后面要改正一下…其他的，比如用户注册信息验证做得不是很高明。</li>
          <li>1. 用户列表，主要是展示用户信息，能够修改用户资料和删除用户。[修改] 这里没有作权限处理，但[删除]有，只有管理员才能删。（在登录的时候用session记录了登录用户的用户名、权限、以及头像路径。）</li>
          <li>2. 添加用户，没有上传头像功能（但是注册用户的时候有，添加用户列表这里不上传也是可以的，session记录null），还有就是这里多了一个用户权限的选择。（注册用户时权限统一为“游览者”）</li>
          <li>3. 权限管理，“管理者”我弄成了不给修改也不给删。其他的是可以修改和删除的。另外还统计了权限人数。</li>
          <li>4. 新增权限，好像也没想出什么验证要求…因为项目接触得还是太少，很容易就新建一个权限，游览者权限也可以。接下来我想细分一下权限操作，在数据里记录这个权限create为true，revise为false，delete为false等等，再具体实施还要再想一下。</li>
          <li>5. 文章列表，可以修改和删除文章，但只有“管理者”才能删除文章。修改用到了富文本编辑器。另外，可以上传文章数据，模板的话就到文章统计那里下载下来就知道了~</li>
          <li>6. 新增文章，也用到了富文本编辑器，由于现在还没有做栏目、文章类型，所以文章类型就可以随便填了。</li>
          <li>7. 评论列表，还没有做，方法是评论数据表的字段article_id记录每篇文章的ID，将来查的时候根据文章ID查出article_id与之一致的评论。</li>
          <li>8. 栏目列表、新增栏目还没有做。</li>
          <li>9. 用户与权限统计也没有做。</li>
          <li>10. 文章与栏目统计，显示文章的 日/周/月 阅读量，还有总阅读量，用到了Mysql的[事件]，写了三个事件分别对应三个数据库字段，到了一定的时间就负责归零。一旦有人点击文章就给四个字段加1 .另外，还可以导出数据库数据为Excel格式，暂时只有.xls格式。</li>
          <li>11. 后台操作统计，还没有做，和细分权限操作有关，主要是记录权限增删改查的次数。</li>
          <li>12. 消息通知，还没有做，方法是：由于在注册的时候，我以用户名的md5码作为用户的内部秘钥（以下简称, inkey），每一篇文章（以文章为例）新增了一个has_read字段为空，然后用户登录的时候，就在一定时间范围内检测每篇文章的这has_read字段有没有用户的inkey，没有就返回一部分文章数据作为消息通知。</li>
          <li>13. 多图上传，ajax上传图片，然后返回链接在本地预览，当用户点击提交的时候，就会把图片链接发回后端，后端对链接进行字符串分割处理找到图片路径，然后移动图片到服务器另一个文件夹（没有的话就创建对应的文件夹）。在本地删除图片的话，我还没在后端进行处理，所以即使没有按“提交”这个铵钮，图片也是已经上传到服务器的。</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
var emoji = require('emoji');
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '前言'
    }
  },
  mounted(){
    console.log('😎😊', emoji.unifiedToHTML('😎'))
    console.log(emoji)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
a {
  color: #42b983;
}
ul li {
  margin-top: 10px;
}
.hello{
  text-align: left;
  font-size: 15px;
}
</style>
